<template>
  <div>
    <div class="flex gap-8 mb-8">
      <!-- 第一个卡片：报道人数（账号人数） -->
      <div class="w-1/3">
        <el-card v-loading="loading" class="rounded-3xl">
          <div class="h-56">
            <h2>报道人数（账号人数）</h2>
            <div class="flex justify-center items-center pt-10 pb-10">
              <div
                class="flex justify-center items-center px-10 py-0 bg-green-100 border-8 border-green-500 dark:bg-green-900 dark:border-green-700 rounded-full shadow-lg shadow-green-200 dark:shadow-green-800"
              >
                <!-- 显示学生人数 -->
                <div class="text-[3.5rem] font-bold">{{ CountStudents }}</div>
              </div>
            </div>
          </div>
        </el-card>
      </div>
      <!-- 第二个卡片：入住率 -->
      <div class="w-1/3 h-full">
        <el-card v-loading="loading" class="rounded-3xl">
          <div class="h-56">
            <h2>入住率</h2>
            <!-- 使用 VChart 组件显示入住率的仪表盘图表 -->
            <v-chart
              class="chart"
              :option="OccupancyRateChartOptions"
              autoresize
            />
          </div>
        </el-card>
      </div>
      <!-- 第三个卡片：各专业人数 -->
      <div class="w-1/3">
        <el-card v-loading="loading" class="rounded-3xl">
          <div class="h-56">
            <h2>各专业人数</h2>
            <!-- 使用 VChart 组件显示各专业人数的柱状图 -->
            <v-chart
              class="chart"
              :option="MajorCountsChartOptions"
              autoresize
            />
          </div>
        </el-card>
      </div>
    </div>
    <!-- 第二行包含一个日历卡片 -->
    <div class="flex gap-4">
      <el-card class="rounded-3xl">
        <!-- 使用 Element Plus 的日历组件 -->
        <el-calendar v-model="date" />
      </el-card>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { onMounted, ref, watch } from "vue";
import { useTransition } from "@vueuse/core";
import { ApiBigScreen } from "@/core/api/index.js";
import VChart from "vue-echarts";
import { GridComponent } from "echarts/components";
import { BarChart } from "echarts/charts";
import { use } from "echarts/core";
import { CanvasRenderer } from "echarts/renderers";
import { GaugeChart } from "echarts/charts";
import { TooltipComponent, TitleComponent } from "echarts/components";

// 注册必要的echarts组件
use([
  CanvasRenderer,
  GaugeChart,
  TooltipComponent,
  TitleComponent,
  GridComponent,
  BarChart,
]);

const loading = ref(false);
const OccupancyRate = ref(0);
const CountStudents = ref(0);
const MajorCounts = ref([]);
const date = ref(new Date());
const source = ref(0);
const outputValue = useTransition(source, { duration: 1500 });
source.value = 172000;

const OccupancyRateChartOptions = ref({
  series: [
    {
      type: "gauge",
      startAngle: 180,
      endAngle: 0,
      min: 0,
      max: 100,
      splitNumber: 12,
      itemStyle: {
        color: "#58D9F9",
        shadowColor: "rgba(0,138,255,0.45)",
        shadowBlur: 10,
        shadowOffsetX: 2,
        shadowOffsetY: 2,
      },
      progress: {
        show: true,
        roundCap: true,
        width: 18,
      },
      pointer: {
        icon: "path://M2090.36389,615.30999 L2090.36389,615.30999 C2091.48372,615.30999 2092.40383,616.194028 2092.44859,617.312956 L2096.90698,728.755929 C2097.05155,732.369577 2094.2393,735.416212 2090.62566,735.56078 C2090.53845,735.564269 2090.45117,735.566014 2090.36389,735.566014 L2090.36389,735.566014 C2086.74736,735.566014 2083.81557,732.63423 2083.81557,729.017692 C2083.81557,728.930412 2083.81732,728.84314 2083.82081,728.755929 L2088.2792,617.312956 C2088.32396,616.194028 2089.24407,615.30999 2090.36389,615.30999 Z",
        length: "75%",
        width: 16,
        offsetCenter: [0, "5%"],
      },
      axisLine: {
        roundCap: true,
        lineStyle: {
          width: 18,
        },
      },
      axisTick: {
        show: false,
      },
      splitLine: {
        show: false,
      },
      axisLabel: {
        show: false,
      },
      title: {
        show: false,
      },
      detail: {
        width: "60%",
        lineHeight: 40,
        height: 40,
        borderRadius: 8,
        offsetCenter: [0, "70%"],
        valueAnimation: true,
        formatter: function (value) {
          return "{value|" + value + "%}";
        },
        rich: {
          value: {
            fontSize: 30,
            fontWeight: "bolder",
            color: "#9ca3af",
          },
        },
      },
      data: [
        {
          value: 100,
        },
      ],
    },
  ],
});

const MajorCountsChartOptions = ref({
  tooltip: {
    trigger: "axis",
    axisPointer: {
      type: "shadow",
    },
  },
  grid: {
    left: "3%",
    right: "4%",
    bottom: "3%",
    containLabel: true,
  },
  xAxis: [
    {
      type: "category",
      data: [],
      axisTick: {
        alignWithLabel: true,
      },
    },
  ],
  yAxis: [
    {
      type: "value",
    },
  ],
  series: [
    {
      name: "Direct",
      type: "bar",
      barWidth: "60%",
      data: [],
    },
  ],
});

const updateOccupancyRateChartOptions = () => {
  OccupancyRateChartOptions.value.series[0].data[0].value = OccupancyRate.value;
};

const updateMajorCountsChartOptions = () => {
  const data = MajorCounts.value;
  const majors = data.map((item) => item.sMajor);
  const counts = data.map((item) => item.count);
  MajorCountsChartOptions.value.xAxis[0].data = majors;
  MajorCountsChartOptions.value.series[0].data = counts;
};

watch(OccupancyRate, updateOccupancyRateChartOptions);
watch(MajorCounts, updateMajorCountsChartOptions);

const getBigScreenInfo = () => {
  loading.value = true;
  Promise.all([getOccupancyRate(), getCountStudents(), getMajorCounts()])
    .then(() => {
       loading.value = false;
    })
    .catch((error) => {
      console.log(error);
    });
};

const getOccupancyRate = async () => {
  const response = await ApiBigScreen.getOccupancyRate();
  if (response.code == 0) {
    OccupancyRate.value = Number((response.data * 100).toFixed(2));
  }
};

const getCountStudents = async () => {
  const response = await ApiBigScreen.getCountStudents();
  if (response.code == 0) {
    CountStudents.value = response.data;
  }
};

const getMajorCounts = async () => {
  const response = await ApiBigScreen.getMajorCounts();
  if (response.code == 0) {
    MajorCounts.value = response.data;
  }
};

onMounted(() => {
  getBigScreenInfo();
});
</script>

<style scoped>
.el-col {
  text-align: center;
}
.chart {
  height: 200px;
}
</style>
